<template>
  <div class="step-item-svg" :class="stepClass">
    <template v-if="option">
      <div class="step-bg">
        <svg viewBox="0,0,100,24" width="100%" xmlns="http://www.w3.org/2000/svg">
          <polygon :points="bgPoints" class="nav-bg" />
        </svg>
      </div>
      <div class="step-content">
        <span class="step-num">{{ option.num }}</span>
        <span class="step-title">{{ option.title }}</span>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'StepItemSvg',
  props: {
    option: {
      type: Object,
      default: () => ({
        num: null,
        title: null,
        subTitle: null,
      }),
    },
    actived: {
      type: Boolean,
      default: false,
    },
    passed: {
      type: Boolean,
      default: false,
    },
    arrived: {
      type: Boolean,
      default: false,
    },
    isEnd: {
      type: Boolean,
      default: false,
    },
    idx: {
      type: Number,
    },
  },
  data() {
    return {
      points: {
        start: '0,0 90,0 100,12 90,24 0,24',
        middle: '0,0 90,0 100,12 90,24 0,24 10,12',
        end: '0,0 100,0 100,24 0,24 10,12',
      },
    }
  },
  computed: {
    stepClass: function () {
      if (this.actived) {
        return 'actived'
      }
      if (this.passed) {
        return 'passed'
      }
      if (this.arrived) {
        return 'arrived'
      }
      return 'unpass'
    },
    bgPoints: function () {
      if (this.isEnd) {
        return this.points.end
      } else if (this.option && this.option.num === 1) {
        return this.points.start
      }
      return this.points.middle
    },
  },
  methods: {},
}
</script>

<style lang="scss" scoped>
.step-item-svg {
  position: relative;
  .step-bg {
    transform: scaleX(1.06);
    .nav-bg {
      fill: #eeedec;
      cursor: pointer;
    }
    svg {
      display: block;
    }
  }
  .step-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
    img {
      vertical-align: middle;
      height: 27px;
    }
    .step-num {
      display: inline-block;
      font-size: 16px;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      text-align: center;
      line-height: 23px;
      color: #000;
      border: 1px solid #000;
      box-sizing: border-box;
      box-sizing: border-box;
    }
    .step-title {
      font-size: 16px;
      // font-weight: bold;
      margin-left: 10px;
    }
  }
  &.arrived {
    .nav-bg {
      fill: rgba(38, 114, 255, 0.2);
    }
  }
  &.passed {
    .nav-bg {
      fill: rgba(38, 114, 255, 0.2);
    }
  }
  &.actived {
    .nav-bg {
      fill: #3b93f7;
    }
    .step-num {
      border: 1px solid #3b93f7;
      color: #3b93f7;
      background: #fff;
    }
    .step-title {
      color: #fff;
    }
  }
  &.unpass {
    .step-content {
      cursor: initial;
      color: #333;
    }
    .step-num {
      color: #666666;
      border: 1px solid #dbdbdb;
      background: #fff;
    }
  }
}
</style>
